<template>
    <div>
        <div class="mint-range" >
            <div class="range">
                <div class="item" v-for="(item,index) in showValue" :key="item.id" 
                :style="{'flex':item.width + item.progress,'background-color':rangeColor[index]}"></div>
            </div>
            <div class="silder" ref="content">
                <div class="item" ref="thumb" :data-index="index" v-for="(item,index) in silderList" 
                :key="index"  :style="{'left':(item.left + item.progress) +'%','border-color':rangeColor[index+1]}"></div>
            </div>
        </div>

        <div class="value-list">
            <div class="item" v-for="(item,index) in textList" :key="index">
                <div class="val" v-if="index == 0">&lt;{{item.range}}</div>
                <div class="val" v-else-if="index == textList.length - 1">&gt;{{textList[index-1].range}}</div>
                <div class="val" v-else>{{textList[index-1].range}}-{{item.range}}</div>
                <div class="name">{{item.name}}</div>
            </div>
        </div>

        <div class="dialog-footer">
            <el-button type="primary" @click="addCode">确 定</el-button>
        </div>
    </div>

</template>

<script type="text/babel">
    import draggable from '../../../utils/draggable';

    export default {
        name: 'mint-range',
        props: {
            maxValue:{
                type: Number,
                default: 100
            },
            rangeList: { // 预设值
                type: Array,
                require:true,
            },
        },
        data(){
            let showValue = [];
            let silderList = [];

            for(let i=0;i<this.rangeList.length;i++){
                    let idx = this.rangeList[i].range;
                    if(idx.indexOf('<') >= 0) {
                        let number = Number(idx.replace('<',''))
                        showValue.push({
                            width:number,
                            number:number,
                            label:this.rangeList[i].name,
                            progress:0,
                            id:this.rangeList[i].id,
                        })
                    }else if(idx.indexOf(">") >= 0) {
                        let number = Number(idx.replace('>',''))
                        console.log(this.maxValue,number);
                        showValue.push({
                            width:this.maxValue - number,
                            number:this.maxValue,
                            label:this.rangeList[i].name,
                            progress:0,
                            id:this.rangeList[i].id,
                        })

                        silderList.push({
                            number:this.maxValue,
                            left: Math.floor(number/this.maxValue*100),
                            value:number,
                            progress:0,
                        })
                    }else{
                        let rg = idx.split('-');
                        let number = Number(rg[1]) - Number(rg[0]);
                        showValue.push({
                            width:number,
                            number:Number(rg[1]),
                            label:this.rangeList[i].name,
                            progress:0,
                            id:this.rangeList[i].id,
                        })

                        silderList.push({
                            number:Number(rg[0]),
                            left: Math.floor(Number(rg[0])/this.maxValue*100),
                            value:number,
                            progress:0,
                        })

                    }
                }
                showValue.sort((a,b)=>a.number - b.number);
                silderList.sort((a,b)=>a.number - b.number);
            return {
                rangeColor:['#DEE9FF','#B6CEFF','#409EFF','#0379f5','#1D53BF'],
                disabled:false,
                showValue,
                silderList,
                textList:showValue.map(item=>{
                    item.name = item.label;
                    item.range = item.number;
                    return item;
                }),
            }
        },
        mounted () {
            const thumbs = this.$refs.thumb;
            const content = this.$refs.content;
            const getThumbPosition = (event,index) => {
                const thumbBox = event.target.getBoundingClientRect();
                const contentBox = content.getBoundingClientRect();
                return {
                    left: thumbBox.left - contentBox.left,
                    top: thumbBox.top - contentBox.top,
                    thumbBoxLeft: thumbBox.left,
                    contentWidth:contentBox.width,
                };
            };
            let dragState = {};
            draggable(thumbs, {
                start: (event,index) => {
                    if (this.disabled) return;
                    const position = getThumbPosition(event,index);
                    const thumbClickDetalX = event.clientX - position.thumbBoxLeft;
                    dragState = {
                        thumbStartLeft: position.left,
                        thumbStartTop: position.top,
                        thumbClickDetalX: thumbClickDetalX,
                        contentWidth:position.contentWidth,
                        thumbIndex:Number(index),
                        min:index == 0? 0: this.silderList[index-1].left,
                        max:index == this.silderList.length - 1 ? 100 : this.silderList[+index+1].left,
                    };
                },
                drag: (event) => {
                    if (this.disabled) return;
                    const contentBox = content.getBoundingClientRect();
                    const deltaX = event.pageX - contentBox.left - dragState.thumbStartLeft - dragState.thumbClickDetalX;
                    // console.log(event.pageX,contentBox.left,dragState.thumbStartLeft,dragState.thumbClickDetalX,deltaX);
                    let value = Math.round(deltaX * this.maxValue / dragState.contentWidth);
                    console.log(dragState.min,this.silderList[dragState.thumbIndex].left + Math.floor(value/this.maxValue*100),dragState.max);
                    let currentValue = 0;
                    if(value > 0){
                        currentValue = this.silderList[dragState.thumbIndex].left + Math.floor(value/this.maxValue*100);
                    }else{
                        currentValue = this.silderList[dragState.thumbIndex].left + Math.ceil(value/this.maxValue*100);
                    }
                    if(dragState.min<currentValue && currentValue < dragState.max){
                        this.showValue[dragState.thumbIndex].progress = value;
                        this.showValue[dragState.thumbIndex + 1].progress = -value;
                        this.silderList[dragState.thumbIndex].progress = value > 0 ? Math.floor(value/this.maxValue*100) : Math.ceil(value/this.maxValue*100);
                        // console.log(this.showValue[dragState.thumbIndex].number,value);
                        this.textList[dragState.thumbIndex].range = this.showValue[dragState.thumbIndex].number + value;
                    }
                },
                end: () => {
                    if (this.disabled) return;
                    console.log('is end?  ')
                    for(let i = 0;i<this.showValue.length;i++){
                        this.showValue[i].width += this.showValue[i].progress;
                        this.showValue[i].progress = 0;
                    }
                    for(let i = 0;i<this.silderList.length;i++){
                        this.silderList[i].left += this.silderList[i].progress;
                        this.silderList[i].progress = 0;
                    }
                    dragState = {};
                }
            });
        },
        methods:{
            addCode(){
                let submitData= [];
                for(let i=0;i<this.textList.length;i++){
                    if(i == 0){
                        submitData.push({
                            indexLower:0,
                            indexUpper:this.textList[i].range,
                            indexId:this.textList[i].name,
                            id:this.textList[i].id
                        })
                    }else if(i == this.textList.length - 1){
                        submitData.push({
                            indexLower:this.textList[i-1].range,
                            indexUpper:this.maxValue,
                            indexId:this.textList[i].name,
                            id:this.textList[i].id
                        })
                    }else{
                        submitData.push({
                            indexLower:this.textList[i-1].range,
                            indexUpper:this.textList[i].range,
                            indexId:this.textList[i].name,
                            id:this.textList[i].id
                        })
                    }
                }

                this.$emit('addedData',submitData)
            }
        }
    };
</script>

<style lang="scss" scoped>

    .mint-range {
        width: 100%;
        box-sizing: border-box;
        height:10px;
        border-radius: 5px;
    }
    .dialog-footer{
        text-align: right;
        margin-top:20px;
    }
    .mint-range .range{
        height:100%;
        display: flex;
        align-items: center;
        border-radius: 5px;
        overflow: hidden;
    }
    .myinput{
        webkit-appearance: none;
        background-color: #FFF;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        text-align: center;
    }
    .mint-range .range .item{
        height:100%;
    }

    .mint-range .silder{
        position: relative;
        margin-top:-10px;
        height:10px;
    }

    .mint-range .silder .item{
        width:20px;
        height:20px;
        box-sizing: border-box;
        border:5px solid blue;
        background-color:white;
        border-radius: 10px;
        position: absolute;
        top:-5px;
        margin-left:-5px;
        cursor: pointer;
    }

    .value-list{
        display:flex;
        align-items: center;
        margin-top:10px;
    }
    .value-list .item{
        flex:1;
    }
    .value-list .item > div{
        text-align: center;
    }
</style>
